vue项目——Vue Router路由的使用

前言：

学习vue也有一段时间了，这里把学习整个vue项目中的一些知识点和问题，整理下方便自己记录，也希望给大家带来方便。我会连续写几篇系统的文章，讲解一个完整的vue项目中用到的各个使用模块。今天先来学习路由的的使用。

一、Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。我简单理解就是我们在有的页面中看到我们点击一个链接他并不是整个页面全部渲染，而是局部页面的一个重新渲染（比如：有的页面跳转的时候可以看到他的title每个页面都是固定的，并不会改变，这一部分是没有重新渲染的），而且上面的链接也会发生相应的变化，整个就是使用路由的结果，可以大大减少我们的资源请求和页面的渲染。这就是路由的作用了，路由一般跟vue 的组件配合使用，大家可以理解为就是a链接的跳转，我们只是指定跳转到我们想要的另一个页面上。

二、安装Vue Router

如果你的项目是用vue-cli搭建的话(至于vue-cli脚手架工具如何安装和搭建，大家可以看我前一篇文章)，在建立项目的时候回让你选择是否安装Vue Router，如果你安装了，就不需要在安装了，如果你的项目是直接搭建的话，那么就需要安装了，直接在项目根目录中输入

1	npm install vue-router

如果你安装了cnpm的话，直接输入

1	cnpm install vue-router

这里推荐使用cnpm，速度会快很多。
运行完成后我们就安装完成了，因为我是用vue-cli搭建的项目，所有这里就以vue-cli环境为主了，如果大家自己搭建的话也差不多（在学习vue中，推荐大家使用vue-cli脚手架工具搭建项目，毕竟跟vue配套的，在IT届东西太多，要学会站在巨人的肩膀上），我们安装完成后还需要在我们的项目的main.js中添加上：

// 1.1导入路由的包
import VueRouter from 'vue-router';
// 1.2安装路由
Vue.use(VueRouter);
// 1.3 导入自己的 router.js 模块
import router from './router/router.js';

注意：1.3中的名字vue-cli生成的叫index.js，我不喜欢这个名字，自己改成了router.js，还有大家的路径可能也不一样，vue-cli生成的模块在Router文件夹下的index.js。

到此我们就安装完成了，并且可以正常使用了。

三、Vue Router的使用

我们安装好了，如何使用呢？刚才说router就像是a标签一样的页面跳转，在roter中我们用专门的标签<router-link></router-link>，a标签要定义herf=""跳转地址，这里我们用to="/home"来定义跳转的页面，这里/home是一个路由地址，就相当于点击了就会去这个链接。

那么这个/home路由链接里面显示的什么东西呢？

这就需要我们提前先定义一个组件了即是一个vue文件，这个vue文件包含了template、style、script，在这个vue文件里面我们就可以写我们需要显示的一套页面了。向这种类似的组件会有有很多，我们一般是放在components文件夹下面的。
然后我们在前面生成的router.js中去写上对应的匹配规则，导入这个组件就可以了。

我上面写的就是导入的组件，下面就是每个组件的匹配规则。

总的来说分为两步：

一是将一个标签为改造<router-link></router-link>为他指定to=""属性，链接地址。

二是在router.js中定义匹配规则和导入组件。

这种跳转方式大家会发现一个问题，就是我们页面的网页源代码中会出现<router-link></router-link>标签，我们想他变成我们想要的标签怎么办呢？这里我们可以给这个标签加一个tag=""属性，自动渲染成我们指定的标签名称。这里还有一个办法就是我们的编程式导航。

四、编程式导航

编程式导航是页面的另一种跳转方式，我们在需要点击跳转的标签中用@click="goDetail()"定义一个点击方法，然后在methods中定义方法的具体实现。

<script>
export default {
    methods: {
        goDetail(){// 使用编程式导航
            this.$router.push('/home/goodsinfo/')
        }
    }
}
</script>

或者改为

1
2
3

goDetail(){// 使用编程式导航
            this.$router.push({ name: "goodsdesc"})
        }

后面这个需要在定义匹配规则的时候增加一个name属性值就可。

然后我们同样的需要在router.js中去定义匹配规则和导入对应的组件。这样我们就把标签改造成了编程式导航了。

五、路由传参

有的时候我们需要利用路由进行传递参数，以区分当前是那一个数据，这个参数一般都是唯一的标记，我们需要在定义@click="goDetail(id)"点击方法的时候拼接一个id值，然后路由链接也相应的变为this.$router.push('/home/goodsinfo/:id')，后面这种写法加一个params属性this.$router.push({ name: "goodsdesc", params: {id}})，我们在路由匹配的时候也需要变成'/home/goodsinfo/:id'这种链接，到时候点击链接，id就会替换为传入的值。
好了，Vue Router路由的使用就说到这里了，大家也可以去看Vue Router 的API文档（你尽管去看，能看懂算我输），下一节我们来讲一下vue中的组件的使用。